import { PageHeader, Button, Descriptions, Menu, Dropdown, Tag, Typography, Row, Popover} from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import { HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons';
import {delItemData, getData} from "../utils/handleLocal";
import {useEffect, useState} from "react";
// import CollectionsPage from "./modalForm";
import CommonModal from "./modalForm";
import { todoListSchema } from "../utils/schema";
import {  Link } from 'react-router-dom'

const HeaderBar = (props) => {
    const [todoList, setTodolist] = useState([])
    const colorList = ["red","volcano","orange","gold","lime","green","cyan","blue","geekblue","purple"]
    const { changeAddShow, setData } = props
    // css in js
    const styleHeader = {
        padding: '15px',
        backgroundColor: '#f5f5f5',
    }

    //hooks
    useEffect(() => {
        setTodolist(getData('todoList'))
    },[])
    const openWordSite = () => {
        const list = getData('workSiteList')
        list.forEach(item => window.open(item,'_blank'))
    }
    const IconLink = ({ src, text }) => (
        <span style={{marginRight:'5px'}}>
            <a className="example-link">
            <img className="example-link-icon" src={src} alt={text} />
                {text}
            </a>
        </span>
    );

    const getRandomColorByList = (list) => {
        return list[Math.floor(Math.random() * list.length)]
    }
    const delTag = (id) => {
        delItemData('todoList',id)
        window.location.reload()
    }

    return(
        <div style={styleHeader}>
            <PageHeader
                avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
                ghost={false}
                title={setData.username}
                subTitle="This is a subtitle"
                extra={[
                    <Button key="3" onClick={() => openWordSite()}>工作模式</Button>,
                    <Button key="2">居家模式</Button>,
                    <Link to={'/set'}>
                    <Button key="1" type="primary" onClick={() => changeAddShow()}>
                        全局配置
                    </Button>
                    </Link>
                ]}
            >
                <Descriptions size="small" column={3}>
                    <Descriptions.Item label="代办事项">
                        {
                            todoList.map(item => {
                                return(
                                    <Popover content={item.content} key={item.id}>
                                        <Tag color={getRandomColorByList(colorList)}         closable
                                             onClose={e => {
                                                 e.preventDefault();
                                                 delTag(item.id);
                                             }}>{item.title}</Tag>
                                    </Popover>
                                    )
                            })
                        }
                        {/*<CollectionsPage />*/}
                        <CommonModal data={todoListSchema}/>

                    </Descriptions.Item>
                </Descriptions>
                <div>
                    <IconLink
                        src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
                        text="Quick Start"
                    />
                    <IconLink
                        src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
                        text=" Product Info"
                    />
                    <IconLink
                        src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
                        text="Product Doc"
                    />
                </div>
            </PageHeader>
        </div>
    )
}

export default  HeaderBar
